import { useState, useRef } from "react";
import Request from "@/hooks/useRequest.tsx";
function Input() {
  const { response } = Request("http://localhost:3004/users");

  const [value, setValue] = useState<string>("");

  const inputRef = useRef<HTMLInputElement>(null);

  function showDom() {
    console.log(inputRef.current);
  }

  return (
    <div>
      <input
        ref={inputRef}
        className="border-2 border-gray-300 rounded-md p-2"
        type="text"
        value={value}
        onChange={(e) => setValue(e.target.value)}
      />
      <button
        className="bg-blue-500 text-white p-2 rounded-md cursor-pointer"
        onClick={showDom}
      >
        获取dom
      </button>
      <div>
        {response.map((item: { id: number; name: string }) => (
          <div key={item.id}>{item.name}</div>
        ))}
      </div>
    </div>
  );
}

export default Input;
